<template>
  <div id="root">
    <div :xl="6" :lg="7" class="bg-login">
      <el-row type="flex" class="row-bg row-two" justify="center" align="middle">
        <el-col :span="6"></el-col>
        <el-col :span="6">
          <!--标题-->
          <h1 class="title">路径匹配</h1>
        </el-col>
        <el-col :span="6"></el-col>
      </el-row>
      <!--form表单-->
      <el-row type="flex" class="row-bg card" justify="center" align="bottom">
        <el-col :span="7" class="login-card">
          <!--loginForm-->
          <el-form ref="loginForm" label-width="21%" class="loginForm">
            <el-form-item label="工作空间" style="width: 380px">
              <el-input v-model="workspace"></el-input>
            </el-form-item>
            <el-form-item label="图层" style="width: 380px">
              <el-input v-model="layer"></el-input>
            </el-form-item>
            <el-form-item class="btn-ground">
              <el-button type="primary" @click="sendRequest">查询</el-button>
              <el-button @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script>
export default {
  name: 'HomeView',
  data() {
    return {
      workspace: '',
      layer: '',
    };
  },
  created() {
    this.workspace = this.$store.state.workspace
    this.layer = this.$store.state.layer
  },
  methods: {
    // 提交表单
    sendRequest() {
      this.$store.dispatch("setWorkspaceAndLayer", {
        workspace: this.workspace,
        layer: this.layer
      }).then(() => {
        this.$router.push("/openMap")
      }).catch((erro) => {
        this.$notify({
          title: "查询失败",
          message: erro,
          type: "error",
          duration: 2000
        });
      });
    },
    // 重置表单
    resetForm() {
      this.workspace = ''
      this.layer = ''
    }
  },
}
</script>

<style scoped>

#root{
  background-image: url("../assets/back.jpg");
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
/*  透明度*/
  opacity: 0.9;
  filter: alpha(opacity=10);
  background-color: #ffffff;
  box-shadow: 0 0 20px #ffffff;
  border-radius: 10px;
}

.bg-login {
  height: 100vh;

}

.btn-ground {
  text-align: center;
}

.title {
  text-shadow: -3px 3px 1px #5f565e;
  text-align: center;
  margin-top: 60%;
  color: #41b9a6;
  font-size: 40px;
}

.login-card {
  background-color: #ffffff;
  opacity: 0.9;
  box-shadow: 0 0 20px #ffffff;
  border-radius: 10px;
  padding: 40px 40px 30px 15px;
  width: auto;
}
</style>
